<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎光临</title>
<style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f2;
        }
        .container {
            width: 80%;
            margin: auto;
            padding: 20px;
        }
        .menu-item {
            border: 1px solid #dcdcdc;
            padding: 10px;
            margin-bottom: 10px;
            background-color: white;
        }
        .menu-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .menu-item h3 {
            margin: 10px 0;
        }
        .menu-item p {
            margin: 5px 0;
        }
        .menu-item button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
        }
        .menu-item button:hover {
            background-color: #45a049;
        }
        
        /* 小屏设备（手机）样式 */
@media (max-width: 600px) {
    .container {
        width: 95%;
        padding: 10px;
    }
    .menu-item {
        padding: 5px;
    }
    .menu-item img {
        height: 150px;
    }
    .menu-item h3 {
        font-size: 1.2em;
    }
    .menu-item p {
        font-size: 0.9em;
    }
    .menu-item button {
        padding: 5px 10px;
        font-size: 0.9em;
    }
    #cart {
        padding: 10px;
    }
    #cart h2 {
        font-size: 1.2em;
    }
    #cart-items li {
        font-size: 0.9em;
    }
    #checkout-btn {
        padding: 5px 10px;
        font-size: 0.9em;
    }
}

/* 中等屏幕（平板）样式 */
@media (min-width: 601px) and (max-width: 1024px) {
    .container {
        width: 85%;
    }
    .menu-item img {
        height: 180px;
    }
}

/* 大屏设备（桌面）样式 */
@media (min-width: 1025px) {
    .container {
        width: 70%;
    }
    .menu-item img {
        height: 200px;
    }
}
    </style>
</head>
<body>
<%    String customer_name = request.getParameter("customer_name");
	String restaurant_name = request.getParameter("restaurant_name");
%>
<div class="container">
    <h1>欢迎来到<%=restaurant_name%>餐馆</h1>
    <h2><%=restaurant_name%>的菜品列表</h2>

    <%
        Class.forName("org.mariadb.jdbc.Driver");
        Connection conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
        Statement stmt = conn.createStatement();
        String sql ="select * from meal_detail";
        ResultSet rs = stmt.executeQuery(sql);
        while (rs.next()){
            String name = rs.getString("name");
            String img = rs.getString("img");
            String state = rs.getString("state");
            String price = rs.getString("price");
    %>
    <div class="menu-item">
        <img src="<%=img%>" alt="菜品图片">
        <h3><%=name%></h3>
        <p><%=state%></p>
        <h2>价格: <%=price%></h2>
        <button class="add-to-cart" data-name="<%=name%>" data-price="<%=price%>">添加到购物车</button>
    </div>
    <%}
        rs.close();
        stmt.close();
        conn.close();%>

    <!-- 购物车区域 -->
    <div id="cart">
        <h2>购物车</h2>
        <ul id="cart-items">
            <!-- 购物车中的项目会动态显示在这里 -->
        </ul>
        <p>总计: $<span id="total-price">0.00</span></p>
        <button id="checkout-btn" disabled>结账</button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var addToCartButtons = document.querySelectorAll('.add-to-cart');
    addToCartButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var productName = this.dataset.name;
            var productPrice = parseFloat(this.dataset.price);
            
            // 确保价格是有效的数字
            if (isNaN(productPrice) || productPrice <= 0) {
                console.error('无效的价格:', productPrice);
                return;
            }

            console.log('点击了加入购物车按钮，产品名称:', productName, '产品价格:', productPrice);
            addToCart(productName, productPrice);
        });
    });

    function addToCart(productName, productPrice) {
        console.log('添加菜品到购物车:', productName);

        // 更新购物车总价
        var currentTotal = parseFloat(document.getElementById('total-price').innerText);
        document.getElementById('total-price').innerText = (currentTotal + productPrice).toFixed(2);

        // 将菜品存入数据库
        var conn = null;
        var pstmt = null;
        try {
            Class.forName("org.mariadb.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
            
            var sql = "INSERT INTO cart (customer_name, meal_name, price) VALUES (?, ?, ?)";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, "ActualUserName"); // 替换为实际的用户名
            pstmt.setString(2, productName);
            pstmt.setDouble(3, productPrice);
            
            pstmt.executeUpdate();

            // 提示用户添加成功
            console.log('菜品已添加到购物车');
        } catch (SQLException e) {
            // 处理数据库错误
            console.error('添加到购物车失败:', e.getMessage());
            // 可以在这里显示一个错误提示给用户
        } finally {
            // 关闭数据库资源
            if (pstmt != null) {
                try { pstmt.close(); } catch (SQLException e) {}
            }
            if (conn != null) {
                try { conn.close(); } catch (SQLException e) {}
            }
        }
        
        // 启用结账按钮
        document.getElementById('checkout-btn').disabled = false;
    }
});
</script>

</body>
</html>